import React, { Component } from 'react'
import { Card,Button,List, Modal,Form,Input, message} from 'antd'
import { connect } from 'react-redux';
import { reqUpdateTeacherPassword,reqUpdateAdminPassword} from '../../api'
import { createDeleteUserInfoAction } from '../../redux/action_creators/login_action';

const { Item } =List;

@connect(
    state=>({
        user:state.userInfo.user,
    }),
    {
        deleteUserInfo:createDeleteUserInfoAction,
    }
)
 class Password extends Component {
     state = {
        isVisible:false,
        oldPassword:'',
        password:'',
        RePassword:''

     }
     componentDidMount(){

     }
     editPassword=()=>{
        this.setState({isVisible:true})
     }
     editFinishPass= async(value)=>{
        const { authority } = this.props.user
        console.log(value);
        if(value.newPassword!==value.RePassword){
            message.error("新密码与确认密码不一致",1)
            return;
        }
        let result;
        if(authority===undefined) result = await reqUpdateTeacherPassword(value.oldPassword,value.newPassword)
        else result = await reqUpdateAdminPassword(value.oldPassword,value.newPassword)
        const { msg,code} = result
        if(code===200){
            message.success("密码修改成功，请重新登录！",1)
            this.props.deleteUserInfo()
        }else{
            message.error(msg,1)
        }
     }
    render() {
        const {isVisible,oldPassword,password,RePassword} = this.state
        const tailLayout = {
            wrapperCol: {
              offset: 8,
              span: 24,
            },
          };
        return (
            <div>
                <Card 
                    title={
                        <div className="product-name">
                            <span>登录密码修改</span>
                        </div>
                    }
                >
                    <List 
                        bordered={false}
                        size={'small'}
                        split={false}
                    >
                        <Item>
                             定期修改登录密码有助于账号的安全。 <Button type="link" onClick={this.editPassword}>修改密码</Button>
                        </Item>
                        
                    </List>
                </Card>
                <Modal
                    title="修改密码"
                    visible={isVisible}
                    onCancel={()=>this.setState({isVisible:false})}
                    cancelText={'取消'}
                    okText={'确定'}
                    footer={null}
                    maskClosable={false}
                    width={300}
                    destroyOnClose
                    >
                    <Form
                        name="basic"
                        initialValues={{
                            remember: true,
                        }}
                        labelAlign="right"
                        onFinish={this.editFinishPass}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="原始密码"
                            name="oldPassword"
                            initialValue={oldPassword}
                            labelAlign="right"
                            rules={[ {required: true,message: '请输入原始密码！',}, ]}
                        >
                            <Input type="password" placeholder="请输入原始密码" style={{width:'150px'}}  allowClear/>
                        </Form.Item>
                        <Form.Item
                            label="更新密码"
                            name="newPassword"
                            initialValue={password}
                            rules={[ {required: true,message: '请输入新密码！',}, ]}
                        >
                           <Input type="password" placeholder="请输入更新密码" style={{width:'150px'}}  allowClear/>
                        </Form.Item>
                        <Form.Item
                            label="确认密码"
                            name="RePassword"
                            initialValue={RePassword}
                            rules={[ {required: true,message: '请输入确认密码！',}, ]}
                        >
                            <Input type="password" placeholder="请输入确认密码" style={{width:'150px'}}  allowClear/>
                        </Form.Item>
                        <br></br>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" className="login-from-admin">
                                修改
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default Password;